<!--  -->
<template>
  <div class='outArea-page'>
    <div class="outArea-info flex-a-c">
      <van-image
        round
        width="55px"
        height="55px"
        :src="userInfo.avatar_image"
      />
      <div class="flex info-user flex-j-sb">
        <div class="flex flex-j-sb user-name">
          <h3>{{userInfo.username}}</h3>
          <p>￥{{sumAmount || '0.00'}}</p>
        </div>
        <div class="flex-a-c flex-j-sb">
          <div class="member-id">会员ID：{{userInfo.uid}}</div>
          <div class="member-add">累计收入(元)</div>
        </div>
      </div>
      
    </div>
    <div class="account-board">
      <div class="account-content">
        <div class="account-tab">
          <van-tabs v-model="status" title-active-color="#F15353" line-height="2px" title-inactive-color="#454545"  @click="ontabClick">
            <van-tab title="奖励记录" ></van-tab>
          </van-tabs>
        </div>
        
        <div class="account-list" v-if="awardList.length > 0 ">
          <div class="account-box"  v-for="(item,index) in awardList" :key="index">
          <div class="account-order flex-a-c flex-j-sb">
              <h3>奖励ID：{{item.id}}</h3>
              <div class="account-price" >+￥{{item.amount}}</div>
            </div>
            <div class="release-box flex-a-c">
              <div class="release-left flex-a-c flex-j-sb">
                <p>奖励比例：{{item.percent}}%</p>
                <p>{{item.status_name}}</p>
                
              </div>
              <div class="release-right">
                <p>{{item.created_at }}</p>
              </div>
            </div>
          </div>
        </div>
        <van-empty description="暂无数据" v-else />
      </div>
      <div class="mh-50"></div>
    </div>
  </div>
</template>

<script>
import balanceAward_controller from './balanceAward_controller';
export default balanceAward_controller;
</script>
<style scoped>
.account-tab ::v-deep .van-tabs {
  padding:0 0 0.1875rem 0;
  border-bottom: 1px solid #E7E7E7;
}
.account-tab ::v-deep .van-tabs--line .van-tabs__wrap {
  height: 2.1875rem;
}
.account-tab ::v-deep  .van-tabs__nav--line {
  padding-bottom: 12px;
}
</style>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .mh-50 {
    height: 3.125rem;
    clear: both;
  }
  .outArea-page {
    height: auto;
    min-height: 100vh;
    .outArea-info {
      padding:1.3125rem 0.75rem 1.5rem 0.75rem;
      background-color: #F15353;
      .info-user {
        flex-direction: column;
        padding:0 0 0 0.4375rem;
        text-align: left;
        flex:1;
        .user-name {
          font-size: 1rem;
          color: #FFFFFF;
          font-weight: 500;
          padding:0 0 0.3125rem 0;
        }
        .member-id {
          font-size: 0.6875rem;
          color: #F15353;
          line-height: 0.6875rem;
          padding:0.3125rem 0.625rem;
          border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
          background-color: #fff;
        }
        .member-add {
          color: #FFFFFF;
          font-size: 0.75rem;
        }
        h3 {
          font-size: 1rem;
          font-weight: bold;
          color: #FFFFFF;
        }
        p {
          color: #FFFFFF;
        }
      }
      
    }
    .account-board {
      margin: 0 0.75rem;
      .account {
        background-color: #fff;
        border-radius: 0.3125rem;
        padding:1.125rem 0 1rem 0;
        .account-box {
          width:50%;
          h3 {
            font-size: 0.8125rem;
            color: #F14E4E;
            padding:0 0 0.625rem 0;
          }
          p {
            font-size: 0.6875rem;
            color: #696969;
          }
        }
      }
      .account-content {
        margin:0.625rem 0 0 0;
        border-radius: 0.3125rem;
        // background-color: #fff;
        // padding: 0 0.75rem;
        .account-tab {
          padding:0 0.625rem;
          background-color: #fff;
          // border-bottom: 1px solid #E7E7E7;
        }
        .account-list {
          // margin:0.4375rem 0 0 0;
          .account-box {
            padding:0.625rem 0.875rem 0.625rem 0.625rem;
            background-color: #fff;
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
            margin-bottom: 0.625rem;
            border-top: 0.0625rem solid #F2F2F2;
            // &:last-child {
            //   border:none;
            // }
            &:first-child {
              border-radius: 0px 0px 8px 8px;
              border-top:none;
            }
            .account-order {
              color: #353535;
              font-size: 0.8125rem;
              padding:0 0 0.75rem 0;
              border-bottom: 1px solid #F2F2F2;
              font-weight: 500;
              h3 {
                font-weight: 500;
              }
            }
            .account-price {
                color: #F15353;
                font-size: 0.8125rem;
            }
            .red {
              color:#FB6B68;
            }
            .account-time {
              text-align: left;
              font-size: 0.6875rem;
              padding:0 0 0.625rem  0;
              color: #999999;
            }
            .release-box {
              padding:0.9375rem 0 0 0;
              flex-direction: column;
              .release-left,.release-right {
                width:100%;
                text-align: left;
                font-size: 0.75rem;
                color: #353535;
                // p:first-child {
                  
                // }
                padding:0 0 0.75rem 0;
              }
              .release-right {
                text-align: left;
                padding:0;
              }
            }
          }
        }
      }
    }
  }
</style>